.{$search-prefix}
  min-width 150px
  position relative
  display inline-block
  vertical-align middle
  .{$search-prefix}-container
    display flex
    .{$search-prefix}-input
      position relative
      flex 1
      input
        width 100%
        padding-right 30px
  .{$icon-prefix}-close, > .{$icon-prefix}-search
    position absolute
    top 50%
    right 8px
    font-size 12px
    z-index 3
    cursor pointer
    transition color $transition-time ease
    color $dark3-color
    margin-top -8px
    &:hover
      color $primary-color
  .{$icon-prefix}-close
    display none
    cursor pointer
    transition color $transition-time ease
  &.{$search-prefix}-front
    > .{$icon-prefix}-search
      left 8px
      right auto
      z-index 1
    input
      padding-left 30px
  &.{$search-prefix}-end
    > .{$icon-prefix}-search
      cursor pointer
      transition color $transition-time ease
  &-searching
    .{$icon-prefix}-close
      display block
  &.{$search-prefix}-has-button
    .{$button-prefix}
      height 30px
      line-height 28px
      padding-top 0
      padding-bottom 0
      border-radius 0 4px 4px 0
      margin-left -1px
    input
      border-radius 4px 0 0 4px
